<!-- Demo for Vuetify Toast -->
<template>
  <v-container>
    <v-row>
      <v-col cols="12">
            <v-radio-group v-model="type" row label="Type：">
              <v-radio
                v-for="(typeValue, i) in ['success', 'info', 'error']"
                :key="i"
                :color="typeValue"
                :label="typeValue"
                :value="typeValue"
              ></v-radio>
            </v-radio-group>
          </v-col>
          <v-col cols="12">
            <v-radio-group v-model="color" row label="Color：">
              <v-radio
                v-for="(colorValue, i) in ['blue', 'black', 'yellow', 'pink']"
                :key="i"
                :color="colorValue"
                :label="colorValue"
                :value="colorValue"
              ></v-radio>
            </v-radio-group>
          </v-col>
          <v-col cols="12" sm="3">
            <v-checkbox
              v-model="x"
              label="Left"
              value="left"
            ></v-checkbox>
          </v-col>
          <v-col cols="6" sm="3">
            <v-checkbox
              v-model="x"
              label="Right"
              value="right"
            ></v-checkbox>
          </v-col>

          <v-col cols="6" sm="3">
            <v-checkbox
              v-model="y"
              label="Top"
              value="top"
            ></v-checkbox>
          </v-col>

          <v-col cols="6" sm="3">
            <v-checkbox
              v-model="y"
              label="Bottom"
              value="bottom"
            ></v-checkbox>
          </v-col>

          <v-col cols="12" sm="3">
            <v-checkbox
              v-model="mode"
              label="Multi-line (mobile)"
              value="multi-line"
            ></v-checkbox>
          </v-col>

          <v-col cols="12" sm="3">
            <v-checkbox
              v-model="mode"
              label="Vertical (mobile)"
              value="vertical"
            ></v-checkbox>
          </v-col>

          <v-col cols="12" sm="4">
            <v-text-field
              v-model="text"
              class="px-4"
              label="Text"
              type="text"
            ></v-text-field>
          </v-col>

          <v-col cols="12" sm="4">
            <v-text-field
              v-model.number="timeout"
              class="px-4"
              label="Timeout"
              type="number"
            ></v-text-field>
          </v-col>
          <!-- <v-col cols="12">
            <v-btn color="primary">Show Toast</v-btn>
          </v-col> -->
        </v-row>
    <v-row>
      <v-btn @click="showMsg">SnackBars</v-btn>
      <!-- <Toast :x="x" :y="y" :color="color" :mode="mode" :text="text" :timeout="timeout"></Toast> -->
    </v-row>
  </v-container>
</template>

<script>
// import Toast from '@/components/Toast/Toast.vue'
// import SnackBars from '@/components/SnackBars/index.js'
export default {
  name: 'DemoToast',
  // components: { SnackBars },
  data: function () {
    return {
      snackbar: false,
      type: 'info',
      color: '',
      x: '',
      y: '',
      mode: '',
      text: 'Test',
      timeout: 3000
    }
  },
  methods: {
    showMsg: function() {
      // console.log(this.$toasted['info'])
      // this.$toasted[this.type](this.text, { color: this.color, x: this.x, timeout: this.timeout, y: this.y, mode: this.mode })
      this.$toasted[this.type](this.text, { position: 'top-center', duration: this.timeout })
    }
  }
}
</script>
<style scoped>
</style>
